<template>
  <div>
    <el-row type="flex" justify="space-around" style="border-radius: 5px">
      <el-card shadow="always" style="border-radios: 5px; width: 100%">
        <el-row
          class="art-item"
          v-for="(article, index) in articles"
          v-bind:key="index"
        >
          <article-item :article="article"> </article-item>
        </el-row>
        <el-row>
          <div class="block pagination" style="text-align: center">
            <el-button type="text" @click="loadArticles()" v-if="isFree">{{
              loadTips
            }}</el-button>
            <el-button type="text" v-else>{{ loadTips }}</el-button>
          </div>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { pageArticles, searchArticles } from "@/api/apis";
import ArticleItem from "../components/article-item.vue";

export default {
  name: "home",
  data() {
    return {
      articles: [],
      archives: [],
      scrollId: "",
      isFree: true,
      loadTips: "正在努力加载数据...",
      current: 1,
    };
  },
  components: {
    ArticleItem,
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let map = { dataState: 0, page: this.current, pageSize: 10 };
      this.loadArticles(map);
    },
    loadArticles(param) {
      this.loadTips = "正在努力加载数据...";
      param = { page: this.current, pageSize: 10 };
      pageArticles(param)
        .then((res) => {
          let data = res.data;
          this.articles = this.articles.concat(data.values);
          this.loadTips = "加载更多...";
          if (
            !data.values ||
            data.values.length == 0 ||
            this.articles.length == data.total
          ) {
            this.loadTips = "已经没了...";
            this.isFree = false;
          } else {
            this.current = this.current + 1;
          }
        })
        .catch((err) => {
          window.console.log(err);
        });
    },
  },
};
</script>

<style scoped>
#side .item {
  margin-bottom: 30px;
}

</style>